<template>
  <div class="pg-shaohuo-franchisee-children">
    
    <h2 class="gl-page-title">
      {{ data.realname ? `${data.realname}的` : '' }}子加盟商管理
    </h2>

    <div class="gl-page-block"
      v-for="(item, index) in data.region_info"
      :key="index">

      <h3 class="gl-page-block__title">{{ item.name }}</h3>

      <!-- 功能按钮区
      -------------------------- -->
      <div class="gl-page-btns">
        <el-button type="success" size="mini"
          @click.native="addChildren(item.region_id)">添加子加盟商</el-button>
      </div>

      <!-- 数据表格
      -------------------------- -->
      <comp-page-table
        class="gl-page-block__item"
        :tableConfig="tableConfig"
        :tableData="item.tableData"
        :loading="tableLoading"
        :total="tableTotal"
        :pageSize="Number(pageSize)"
        :pageSizes="pageSizes"
        @currentChange="tableCurrentChange"
        @sortChange="tableSortChange"
        @sizeChange="tableSizeChange"
        @selectionChange="tableSelectionChange">
        <el-table-column
          label="操作"
          width="60">
          <template slot-scope="scope">
            <el-button  @click.native="getData(scope.row, item.region_id)"
              type="text" size="small"
              slot="reference"
              :loading="loadingBtn === '修改' && loadingRow === scope.$index">修改</el-button>
          </template>
        </el-table-column>
      </comp-page-table>
    </div>

    
    <!-- 添加，修改弹窗
    -------------------------- -->
    <add-edit-franchisee-children
      :metaData="dialogMetaData"
      :showByToggle="showDialogByToggle"
      :editData="editData"
      @dialogComplete="getTableData"></add-edit-franchisee-children>
  </div>
</template>

<script>
import { tableConfig } from './config'
import AddEditFranchiseeChildren from './add-edit-franchisee-children'

import { ShaohuoFranchiseeService } from 'services/Api'
import {
  ConfirmTempMixin,
  btnLoadingMixin,
  tableCoreMixin,
  dialogBeforeEditMixin
} from 'services/Public'
import { mapState } from 'vuex'

export default {
  name: 'PgShaohuoFranchiseeChildren',
  components: { AddEditFranchiseeChildren },
  mixins: [
    ConfirmTempMixin,
    btnLoadingMixin,
    tableCoreMixin,
    dialogBeforeEditMixin
  ],
  data () {
    return {
      tableConfig,
      data: {},
      dialogMetaData: {
        id: ''
      }
    }
  },
  computed: {
    ...mapState([ 'acc_id' ]),
    franchiserId () {
      return this.$route.params.id
    },
    // 接口参数
    franchiserDetailParam () {
      return {
        acc_id: this.acc_id,
        uid: this.franchiserId
      }
    }
  },
  methods: {
    getData (data, id) {
      this.dialogMetaData.id = id
      this.editData = { ...data }
      this._showDialog()
    },
    addChildren (id) {
      this.showDialogByToggle = !this.showDialogByToggle
      this.dialogMetaData.id = id
    },
    // 重写getTableData方法
    async getTableData () {
      this.tableLoading = true
      const [ err, res ] = await this.preFetchTableData()
      this.tableLoading = false
      if (err) return this.$message.error(err.message || '获取数据出错')
      this.data = this.tableDataHandler(res)
    },
    tableDataHandler (res) {
      res.region_info = res.region_info.map(i => {
        i.tableData = res.son
          .filter(son => son.region_info.find(info => info.parent_region === i.region_id))
          .map(son => {
            son.region = son.region_info.map(i => i.name).join(',')
            return son
          })
        return i
      })
      return res
    },
    // 全部捎货人种类信息
    preFetchTableData () {
      return ShaohuoFranchiseeService.franchiserDetail(this.franchiserDetailParam)
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/views.scss";

@include b(shaohuo-franchisee-children) {}
</style>
